<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head th:fragment="header-commo(title)">
    <meta charset="utf-8">
    <!--声明文档兼容模式，表示使用IE浏览器的最新模式-->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!--设置视口的宽度(值为设备的理想宽度)，页面初始缩放值<理想宽度/可见宽度>-->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title th:text="'酷玩周边商城 - '+${title}">酷玩周边商城</title>
    <!-- 导入图标 -->
    <link rel="shortcut icon" href="../static/img/favicon.ico" th:href="@{/img/favicon.ico}"/>
    <!-- 引入Bootstrap核心样式文件 -->
    <link th:href="@{/css/bootstrap.min.css}" href="./css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" th:href="@{/css/base.css}" href="css/base.css" />
    <!-- 引入jQuery核心js文件 -->
    <script th:src="@{/js/jquery-1.11.3.min.js}" src="js/jquery-1.11.3.min.js"></script>
    <!-- 引入BootStrap核心js文件 -->
    <script th:src="@{/js/bootstrap.min.js}" src="js/bootstrap.min.js"></script>
    <script th:inline="javascript">
        $(function () {
            //获取当前项目目录
            const basePath = [[${#request.contextPath}]];
            //发送获取分类信息的ajax请求
            $.post(
                //请求地址
                basePath+'/itemCat/list',
                //回调函数
                function (data) {
                    console.log(data)
                    //遍历集合获得分类信息
                    var itemCatInfo = '';

                    for(i in data){
                        itemCatInfo += '<li><a href="'+basePath+'/item/cat/'+data[i].cid+'/1'+'">'+data[i].name+'</a></li>';
                    }
                    //修改分类列表的信息
                    $(".wz-nav").html(itemCatInfo);
                }
            );
        })
    </script>
</head>
<body>
<header th:fragment="header-nav">
    <div class="container-fluid wz-notice">
        <div class="container">
            <li class="icon-notice"></li>
            <span>酷玩周边商城手办热销中！，点击 <a href="#">查看详情</a> </span>
        </div>
    </div>
    <nav class="container-fluid wz-info" >
        <div class="container">
            <div class="row">
                <div class="col-md-4 col-xs-6" >
                    <a class="icon-wzry pull-left" href="#">王者荣耀</a>
                    <div class="fl ico-comm i-solgan">可以触摸的欢乐时光</div>
                </div>
                <div class="col-md-4 hidden-xs" >
                    <div class="search-box">
                        <input type="text" class="pull-left" placeholder="请输入想要找的宝贝" />
                        <button type="submit" class="pull-left"  >搜索</button>
                    </div>
                </div>
                <div class="col-md-4 col-xs-6" style="margin-top: 40px;">
                    <ul class="list-inline text-right ">
                        <li th:if="${session.user}==null">
                            <a class="font1" th:href="@{/user/login}"><span class="glyphicon glyphicon-user" aria-hidden="true"></span>&nbsp;登录</a>
                        </li>
                        <li th:if="${session.user}!=null" class="dropdown">
                          <span data-toggle="dropdown" class="font1" href="javascript:void(0);"> <span th:text="'欢迎您，'+${session.user.name}"></span> <span class="caret"></span></span>
                          <ul class="dropdown-menu" >
                            <li><a th:href="@{/pay/showUserOrders}" href="#"><span class="glyphicon glyphicon-list-alt"></span> 订单管理</a></li>
                            <li role="separator" class="divider"></li>
                            <li><a th:href="@{/out}"><span class="glyphicon glyphicon-log-out"></span> 退出登录</a></li>
                          </ul>
                        </li>
                        <li>
                            <a class="font1" th:href="@{/cart}" href="#"><span class="glyphicon glyphicon-shopping-cart"></span>&nbsp;购物车</a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </nav>
    <!--导航条-->
    <nav class="navbar navbar-inverse ">
        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" th:href="@{/}" href="#">商城首页</a>
            </div>
            <!-- Collect the nav links, forms, and other content for toggling -->
            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                <ul class=" nav navbar-nav wz-nav font2" >
                    <li>
                        <a href="">分类一</a>
                    </li>
                    <li>
                        <a href="">分类一</a>
                    </li>
                    <li>
                        <a href="">分类一</a>
                    </li>
                    <li>
                        <a href="">分类一</a>
                    </li>
                    <li>
                        <a href="">分类一</a>
                    </li>
                </ul>
                <form class="hidden-md  hidden-lg navbar-right " role="search">
                    <div class="  form-group">
                        <input type="text" class="form-control" placeholder="请搜索商品..">
                    </div>
                    <button type="submit" class="btn btn-default">搜索</button>
                </form>
            </div>
        </div>
    </nav>
</header>
</body>
</html>